<template>
    <div class="options-series">
        <Checkbox v-if="haxY" v-model="yAxisState"  class="p-b-10" @on-change="changeYaxis"	>区分y轴</Checkbox>
        <div  class=""  v-for="(item,index) in series" :key="index" 
            :class="{'p-b-10 dashed-bottom':index<series.length-1,'p-t-10':index>0}"
            v-if=" haxY &&(item.type=='bar' || item.type=='line' || item.type =='scatter')" >
            <Checkbox v-model="item.show"  @on-change="changeSeries(item.show,index)"	>辅助线{{index+1}}</Checkbox>
            <div class="right-row"  >
                <span class="r-tit">数值名称</span>
                <div class="r-cnt">
                    <Input    v-model="item.name"  > </Input>
                </div>
            </div>
            <div class="right-row" v-if="item.show">
                <span class="r-tit">标线类型</span>
                <div class="r-cnt">
                    <Select  class="box-class" placeholder="大小" v-model="item.markLine.data[0].type" @on-change="lineTypechange(item.markLine.data[0].type,index)" >
                        <Option  v-for="(it,sindex) in lineType" :key="sindex" :label="it.name" :value="it.type">
                        </Option>
                    </Select>
                </div>
            </div>
            <div class="right-row" v-if="item.show && item.markLine.data[0].type=='1'">
                <span class="r-tit">自定义数值</span>
                <div class="r-cnt">
                    <Input    v-model="item.markLine.data[0].yAxis"  > </Input>
                </div>
            </div>
            <div class="right-row" v-if="item.show">
                <span class="r-tit">标线名称</span>
                <div class="r-cnt">
                    <Input    v-model="item.markLine.data[0].name"  > </Input>
                </div>
            </div>
        </div> 
    </div>
</template>
<script>
import util from 'util'
//设置图表属性  series 
export default {
    props:{
        graphOptions:{
            type:Object
        },
        series:{
            type:Array,
            default:function () {
                return [];
            }
        }
    },
    computed:{
        haxY(){
            if(this.graphOptions.yAxis !=null ){
                return true;
            }else{
                return false;
            }

        }
    },
    data(){
        return{
            yAxisState:false,
            lineType:[
                {type: 'average', name: '平均值'},
                {type: 'min', name: '最小值'},
                {type: 'max', name: '最大值'},
                {type: '1', name: '自定义'},
            ]
        }
    },
    methods:{
        //区分y轴  每一个数值值  对应一个y轴
        changeYaxis(value){
            for(var i in this.series){
                this.$set(this.series[i],'yAxisIndex',value?parseInt(i):0)
            }
        },
        changeSeries(show,index){
            if(show){
                this.$set(this.series[index],'markLine',{
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                });
            }else{
                this.$set(this.series[index],'markLine',{});
            }
            console.log('series',this.series)
        },
        lineTypechange(value,index){
            var markLine =util.util.cloneObj(this.series[index].markLine);
            if(value=='1'){
                markLine.data[0].yAxis=0;
            }else{
                markLine.data[0].yAxis=null;
            }
            this.$set(this.series[index],'markLine',markLine)
        }
    },
    mounted(){
        console.log('init series',this.series,this.graphOptions)
    }
}
</script>

